<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
			document.addEventListener("deviceready", myDeviceReadyListener, false);
	});	
 	function myDeviceReadyListener(){
 		$('#btn_getPic').click(function(){
 			navigator.camera.getPicture(onSuccess, onFail, { 
 				quality: 70,
			    destinationType: Camera.DestinationType.FILE_URI, //以文件地址返回url
			    sourceType:Camera.PictureSourceType.Camera,
			    targetWidth:300,
			    targetHeight:300
			});
			 			
 		})
	} 	
	//成功
	function onSuccess(imageURI) {
	
			alert(imageURI);
	    $('#img_pic').css('display','block');	    
	    $('#img_pic').attr("src",imageURI);
	    
	}

	//失败
	function onFail(message) {
	    alert('Failed because: ' + message);
	}

 
</script>
</head> 
<body>
<div data-role="page">
		<div data-role="header">
			<h1>Camera</h1>
		</div>
		<div data-role="content">
			<img style="dispaly:none" id="img_pic"/>
			<a id="btn_getPic" href="#" data-role="button">拍照</a>
		</div>
		<div data-role="footer">
			<h4>&nbsp;</h4>
		</div>
</div>

</body>
</html>
